<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apollo Admin - 管理员登录</title>
    
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- jQuery -->
    <script src="/back/scripts/jquery-2.1.0.min.js"></script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        .login-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 40px;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .logo {
            font-size: 48px;
            margin-bottom: 15px;
            color: #fff;
        }

        .login-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #fff;
        }

        .login-subtitle {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.9);
        }

        .input-wrapper {
            position: relative;
        }

        .form-input {
            width: 100%;
            padding: 12px;
            padding-right: 40px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            font-size: 14px;
            outline: none;
            transition: all 0.3s ease;
        }

        .form-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .form-input:focus {
            border-color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.15);
        }

        .input-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            font-size: 14px;
        }

        .input-icon:hover {
            color: rgba(255, 255, 255, 0.9);
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            margin: 20px 0;
        }

        .checkbox-input {
            margin-right: 8px;
        }

        .checkbox-label {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
        }

        .login-button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border: none;
            border-radius: 10px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s ease;
            margin-bottom: 15px;
            outline: none;
        }

        .login-button:hover {
            transform: translateY(-2px);
        }

        .login-button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        .loading {
            display: none;
            text-align: center;
            color: rgba(255, 255, 255, 0.8);
            font-size: 13px;
        }

        .notification {
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 13px;
            display: none;
        }

        .notification.error {
            background: rgba(244, 67, 54, 0.2);
            border: 1px solid rgba(244, 67, 54, 0.5);
            color: #ffcdd2;
        }

        .notification.success {
            background: rgba(76, 175, 80, 0.2);
            border: 1px solid rgba(76, 175, 80, 0.5);
            color: #c8e6c9;
        }

        .footer-links {
            text-align: center;
            margin-top: 15px;
        }

        .footer-link {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-size: 12px;
            padding: 5px 10px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .footer-link:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
        }

        @media (max-width: 480px) {
            .login-container {
                margin: 20px;
                padding: 30px 25px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <div class="logo">
                <i class="fas fa-rocket"></i>
            </div>
            <h1 class="login-title">Apollo Admin</h1>
            <p class="login-subtitle">欢迎回来，请登录您的管理员账户</p>
        </div>
        
        <div class="login-form">
            <div id="notification" class="notification"></div>
            
            <form id="loginForm">
                <div class="form-group">
                    <label class="form-label" for="username">
                        <i class="fas fa-user"></i> 用户名
                    </label>
                    <div class="input-wrapper">
                        <input type="text" id="username" name="username" class="form-input" 
                               placeholder="请输入您的用户名" required autocomplete="username">
                        <i class="fas fa-user input-icon"></i>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="password">
                        <i class="fas fa-lock"></i> 密码
                    </label>
                    <div class="input-wrapper">
                        <input type="password" id="password" name="password" class="form-input" 
                               placeholder="请输入您的密码" required autocomplete="current-password">
                        <i class="fas fa-eye-slash input-icon" id="togglePassword"></i>
                    </div>
                </div>
                
                <div class="checkbox-group">
                    <input type="checkbox" id="rememberMe" name="rememberMe" class="checkbox-input">
                    <label for="rememberMe" class="checkbox-label">
                        记住我的登录状态
                    </label>
                </div>
                
                <button type="submit" id="loginButton" class="login-button">
                    <i class="fas fa-sign-in-alt"></i> 登录到后台
                </button>
                
                <div id="loading" class="loading">
                    <i class="fas fa-spinner fa-spin"></i> 正在验证登录信息...
                </div>
            </form>
            
            <div class="footer-links">
                <a href="javascript:void(0);" class="footer-link" onclick="showDefaultAccount()">
                    <i class="fas fa-info-circle"></i> 查看默认账号
                </a>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 表单提交事件
            $('#loginForm').on('submit', function(e) {
                e.preventDefault();
                handleLogin();
            });
            
            // 回车键提交
            $('#username, #password').on('keypress', function(e) {
                if (e.which === 13) {
                    handleLogin();
                }
            });
            
            // 密码显示切换
            $('#togglePassword').on('click', function() {
                const passwordField = $('#password');
                const icon = $(this);
                
                if (passwordField.attr('type') === 'password') {
                    passwordField.attr('type', 'text');
                    icon.removeClass('fa-eye-slash').addClass('fa-eye');
                } else {
                    passwordField.attr('type', 'password');
                    icon.removeClass('fa-eye').addClass('fa-eye-slash');
                }
            });
        });

        function handleLogin() {
            const username = $('#username').val().trim();
            const password = $('#password').val().trim();
            const rememberMe = $('#rememberMe').is(':checked');

            if (!username || !password) {
                showNotification('请输入用户名和密码', 'error');
                return;
            }

            setLoading(true);

            $.ajax({
                url: '/api/admin/login',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    username: username,
                    password: password,
                    rememberMe: rememberMe
                }),
                success: function(response) {
                    if (response.code === 200) {
                        showNotification('登录成功，正在跳转...', 'success');
                        setTimeout(function() {
                            window.location.href = '/backs/index';
                        }, 1000);
                    } else {
                        showNotification(response.message || '登录失败', 'error');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('登录请求失败:', error);
                    showNotification('网络错误，请重试', 'error');
                },
                complete: function() {
                    setLoading(false);
                }
            });
        }

        function showNotification(message, type) {
            const notification = $('#notification');
            notification.removeClass('error success')
                       .addClass(type)
                       .text(message)
                       .show();
            
            if (type === 'success') {
                setTimeout(function() {
                    notification.fadeOut();
                }, 3000);
            }
        }

        function setLoading(loading) {
            const button = $('#loginButton');
            const loadingDiv = $('#loading');
            
            if (loading) {
                button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 登录中...');
                loadingDiv.show();
            } else {
                button.prop('disabled', false).html('<i class="fas fa-sign-in-alt"></i> 登录到后台');
                loadingDiv.hide();
            }
        }

        function showDefaultAccount() {
            alert('🚀 Apollo 管理后台\n\n👤 默认管理员账号：\n用户名：admin\n密码：123456\n\n⚠️ 重要提示：\n为了您的账户安全，请在首次登录后立即修改默认密码！');
        }
    </script>
</body>
</html>